<template>
  <div>
    <div ref="contentDiv" class="slba-container">
      <div class="slba-header">
        <div v-if="false" class="clba-hj">
          <div class="clba-hj-title">合计信息</div>
          <div class="clba-hj-content">
            <div class="clba-hj-content-item">
              <div class="clba-hj-content-item-title">总数</div>
              <div class="clba-hj-content-item-count">
                {{ total }}
                <span class="clba-hj-content-item-dw">个</span>
              </div>
            </div>
            <div class="clba-hj-content-item">
              <div class="clba-hj-content-item-title">备案者</div>
              <div class="clba-hj-content-item-count">
                {{ HjData.BranchesName }}
                <span class="clba-hj-content-item-dw">个</span>
              </div>
            </div>
            <div v-if="isVis" class="clba-hj-content-item">
              <div class="clba-hj-content-item-title">品种名称</div>
              <div class="clba-hj-content-item-count">
                {{ HjData.VarietyNames }}
                <span class="clba-hj-content-item-dw">个</span>
              </div>
            </div>
            <div class="clba-hj-content-item">
              <div class="clba-hj-content-item-title">种子企业</div>
              <div class="clba-hj-content-item-count">
                {{ HjData.DegBranchesName }}
                <span class="clba-hj-content-item-dw">个</span>
              </div>
            </div>
          </div>
        </div>
        <div style="margin-top: 12px">
          <div class="list-container-title">
            <div class="column column-1 text-align-center">序号</div>
            <div class="column column-2 text-align-center">备案者</div>
            <div v-if="isVis" class="column column-3 text-align-center">
              品种名称
            </div>
            <div class="column column-4 text-align-center">种子企业</div>
            <div class="column column-5 text-align-center">操作</div>
          </div>
        </div>
      </div>

      <div class="slba-content">
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
          <van-list
            :loading="loading"
            :finished="finished"
            finished-text="已经到底了"
            class="c-dab-list"
            offset="50"
            :immediate-check="false"
            @load="onLoad"
          >
            <div
              v-for="(item, index) in tableData"
              :key="index"
              @click="gotoDetails(item, index)"
              class="list-container"
            >
              <div class="column column-1 text-align-center">
                <span v-if="index > 0">
                  {{ index }}
                </span>
                <span v-else> 合计 </span>
              </div>
              <div class="column column-2">{{ item.BranchesName }}</div>
              <div v-if="isVis" class="column column-3">
                {{ item.VarietyNames }}
              </div>
              <div class="column column-4">{{ item.DegBranchesName }}</div>
              <div class="column column-5 text-align-center">
                <van-icon v-if="index > 0" name="arrow" />
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter } from "vue-router";
import uiUtil from "@/util/UiUtil.js";
import { BeiAnTypeEnum, getBeiAnType } from "@/bean/BeiAnType.js";
const tableData = ref([]);
const contentDiv = ref(null);
// 响应式数据源
const filingData = ref([]);
const router = useRouter();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const showEmpty = ref(true);
const type = ref({});

const isVis = ref(false);

const adjustContentHeight = () => {
  if (contentDiv.value) {
    const screenHeight = window.innerHeight;

    const contentHeight = screenHeight - props.divHeight;

    // 设置 slba-content 的高度
    contentDiv.value.style.height = `${contentHeight}px`;
    console.log("contentHeight ", contentHeight, props.tabName);
  }
};
const props = defineProps({
  type: String,
  active: String,
  tabName: String,
  state: String,
  divHeight: Number,
});
const emit = defineEmits(["data-total"]);
watch(
  () => props.active,
  (newShow) => {
    console.log("props", props.active, props.tabName);
    if (props.active == props.tabName) {
      type.value = getBeiAnType(props.type);
      isVis.value = props.type != BeiAnTypeEnum.FZJG.type;
      getData();
      adjustContentHeight();
    }
  }
);

watch(
  () => props.divHeight,
  (newShow) => {
    if (props.active == props.tabName) {
      adjustContentHeight();
    }
  }
);
onMounted(() => {
  getData();

  type.value = getBeiAnType(props.type);
  isVis.value = props.type != BeiAnTypeEnum.FZJG.type;

  adjustContentHeight();

  // 添加窗口大小调整事件监听器
  window.addEventListener("resize", adjustContentHeight);
});
let page = 1;
const onRefresh = () => {
  page = 1;
  getData();
};
const onLoad = () => {
  if (loading.value) {
    return;
  }
  page = page + 1;
  getDataList();
};
const getData = async () => {
  // getHeJi()
  await getDataList();
};
const getDataList = async () => {
  loading.value = true;
  const params = {
    page: page,
    size: 10,
    fillingType: props.type,
    Status: props.state,
    heji: "0",
  };
  if (params.page == 1) {
    params.heji = "1";
  }
  uiUtil.http().getObj({
    url: uiUtil.urlPath.getAcceptList,
    data: params,
    start: () => {
      uiUtil.toastLoading();
      if (refreshing.value) {
        refreshing.value = false;
      }
    },
    succeed: (res) => {
      // loading.value = false;
      // debugger
      console.log("1ucceed=", res);
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      if (!res.data.records) {
        // 如果返回数据为空，表示已加载完成
        finished.value = true;
        uiUtil.toastClose();
        return;
      }

      if (res.data.total) {
        total.value = res.data.total;

        emit("data-total", total.value);
      }
      if (res.data.records.length > 0) {
        if (params.page == 1) {
          tableData.value = res.data.records;
        } else {
          tableData.value.push(...res.data.records);
        }
      } else if (params.page == 1) {
        tableData.value = [];
      }
    },
    failed: (res) => {
      // debugger
      console.log("failed=", res);
      // showFailToast('添加失败')
      uiUtil.toastFail("添加失败");
    },
    finish: () => {
      uiUtil.toastClose();
      loading.value = false;
    },
  });
};
const list = ref([]);
const HjData = ref({});
const total = ref(0);
const pageIndex = ref(1);
const data1 = {
  page: pageIndex.value,
  size: 10,
  fillingType: props.type,
  Status: props.state,
  heji: "1",
};
const getHeJi = async () => {
  const params = {
    page: 1,
    size: 10,
    fillingType: props.type,
    Status: props.state,
    heji: "1",
  };
  uiUtil.http().getObj({
    url: uiUtil.urlPath.getAcceptList,
    data: params,
    start: () => {
      uiUtil.toastLoading();
      if (refreshing.value) {
        refreshing.value = false;
      }
    },
    succeed: (res) => {
      // loading.value = false;
      // debugger
      console.log("111111111111succeed=", res);
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      if (!res.data.records) {
        // 如果返回数据为空，表示已加载完成
        finished.value = true;
        uiUtil.toastClose();
        return;
      }

      if (res.data.total) {
        total.value = res.data.total;

        emit("data-total", total.value);
      }
      if (res.data.records.length > 0) {
        HjData.value = res.data.records[0];
      }
      uiUtil.toastClose();
    },
    failed: (res) => {
      // debugger
      console.log("failed=", res);
      // showFailToast('添加失败')
      uiUtil.toastFail("添加失败");
    },
    finish: () => {
      uiUtil.toastClose();
      loading.value = false;
    },
  });
};

const gotoDetails = (item) => {
  router.push({ path: type.value.xqpath, query: { id: item.UserFilingID } });
};
</script>

<style scoped>
.slba-container {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.slba-header,
.slba-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 0;
  overflow: auto;
  margin: 0 12px;
}

.slba-content {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 12px;
}

.clba-hj {
  margin: 12px 0 0 0;
  background-color: white;
  border-radius: 4px;
  padding: 12px 0;
}

.clba-hj-title {
  background: linear-gradient(
    to right,
    rgba(2, 194, 137, 0.33),
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );

  width: 93px;
  align-items: center;
  margin: 0;
  padding: auto;
  padding: 6px 12px;
  text-align: left;
  color: #222;
  font-size: 13px;
  font-weight: 500;
}

.clba-hj-content {
  /* 使用弹性盒布局 */
  display: flex;
  /* 子元素间距均匀分布 */
  justify-content: space-around;
  margin-top: 12px;
}

.clba-hj-content-item {
  /* 子元素宽度 */
  width: 100px;
  /* 文字居中 */
  text-align: center;
}

.clba-hj-content-item-title {
  font-size: 13px;
  font-weight: 400;
  color: rgb(136, 136, 136);
}

.clba-hj-content-item-count {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  color: rgb(34, 34, 34);
}

.clba-hj-content-item-dw {
  font-size: 10px;
  color: rgb(136, 136, 136);
}

.table-container {
  width: 100%;
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  min-height: 50px;
  padding: 4px;
  background-color: #fff;
}

th {
  background-color: #f9f9f9;
  font-weight: bold;
  text-align: center;
  min-height: 50px;
}

.list-container-title {
  width: 100%;
  display: flex;
  background-color: #f9f9f9;
  font-weight: bold;
  text-align: center;
  align-items: center;
  min-height: 50px;
}

.list-container {
  width: 100%;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  padding: 5px;
}

.column {
  padding: 0 2px;
  word-break: break-all;
  word-wrap: break-word;
}

.column-1 {
  width: 50px;
}

.text-align-center {
  text-align: center;
}

.column-5 {
  width: 50px;
}

.column-2,
.column-3,
.column-4 {
  flex: 1;
}
</style>